<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文件管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
  <style>
    body{padding:10px; font-size:14px; background:#fff; width:95%; margin:0 auto; font-size:14px; line-height:20px; overflow:hidden;}
    p{margin-bottom:10px;}
    input{border:1px solid #999; padding:5px 10px; margin:0 10px 10px 0;}
	#LAY-flow-demo .flow-default{width: 600px; height: 250px; overflow: auto; font-size: 0;padding: 5px;}
	#LAY-flow-demo .flow-default li{display: inline-block; margin: 0 5px; font-size: 14px; width: 30%;  margin-bottom: 10px; height: 100px; line-height: 100px; text-align: center; background-color: #eee; cursor: pointer; position: relative;}
	#LAY-flow-demo .flow-default img{width: 100%; height: 100%;}
	#LAY-flow-demo .site-demo-flow{width: 600px; height: 250px; overflow: auto; text-align: center;}
	#LAY-flow-demo .site-demo-flow span{width: 30%; margin: 0 5px 10px 0; border: none; float: left;}
	  #LAY-flow-demo .site-demo-flow span img{width: 100%;}
	@media screen and (max-width: 768px) {
		#LAY-flow-demo .flow-default,
		#LAY-flow-demo .site-demo-flow{width: 100%;}
		#LAY-flow-demo .flow-default li{width: 30%}
		#LAY-flow-demo .site-demo-flow img{height: 150px;}
	}

	img {
	  position: absolute;
	  margin: auto;
	  top: 0; left: 0; bottom: 0; right: 0;
	  width: 100%;
	  height: 100%;
	  border-radius: 1px;
	  box-shadow: 0 0 0 4px #fff;
	  cursor: pointer;
	  animation:        unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
	  -o-animation:     unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
	  -ms-animation:    unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
	  -moz-animation:   unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
	  -webkit-animation: unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
	}

	li.selected img {
	  box-shadow: 0 0 0 4px #00c09e;
	}

	li:before {content: "\2714";display: block;position: absolute;margin: auto;top: 0; left: 0; bottom: 0; right: 0;width: 40px;height: 40px;line-height: 40px; background:  #00c09e;border-radius: 50px;color: #fff;text-align: center;font-size: 16px;z-index: 10;opacity: 0;transition:         0.3s linear;-o-transition:      0.3s linear;-ms-transition:     0.3s linear;-moz-transition:    0.3s linear;-webkit-transition: 0.3s linear;-o-user-select:      none;-moz-user-select:    none;-webkit-user-select: none;cursor: pointer;}

	li.selected:before {opacity: 1;}
	@keyframes selected {
	  0% { border-color: #fff; }
	  50% { transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
	  80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
	}
	@-o-keyframes selected {
	  0% { box-shadow: 0 0 0 4px #fff; }
	  50% { -o-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
	  80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
	}
	@-ms-keyframes selected {
	  0% { box-shadow: 0 0 0 4px #fff; }
	  50% { width: 45%; height: 45%; opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
	  80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
	}
	@-webkit-keyframes selected {
	  0% { box-shadow: 0 0 0 4px #fff; }
	  50% { -webkit-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
	  80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
	}
	@keyframes unselected {
	  0% { box-shadow: 0 0 0 4px #00c09e; }
	  50% { transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
	  80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
	}
	@-o-keyframes unselected {
	  0% { box-shadow: 0 0 0 4px #00c09e; }
	  50% { -o-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
	  80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
	}
	@-ms-keyframes unselected {
	  0% { box-shadow: 0 0 0 4px #00c09e; }
	  50% { width: 45%; height: 45%; opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
	  80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
	}
	@-webkit-keyframes unselected {
	  0% { box-shadow: 0 0 0 4px #00c09e; }
	  50% { -webkit-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
	  80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
	}
	  #test-table-ware{overflow: hidden; height: 250px; display: inline-block; width: 100%;}
	  #test-table-ware tbody{height: 250px;overflow: scroll}
  </style>
</head>
<body>
<div class="layui-row layui-col-space10">
   <!--
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
      <input class="layui-input" placeholder="URL" id="LAY_mark">
    </div>
    -->
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-btn-container">
      <!--<button type="button" class="layui-btn" data-type="addurl">添加URL</button>-->
      <button type="button" class="layui-btn avatarUpload">
      	上传文件
      	<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>
      </button>
      <button type="button" class="layui-btn layui-btn-danger" data-type="delete">删除文件</button>
    </div>
</div>

<div class="layui-card">
	<div class="layui-card-body">
        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-hash">
          <ul class="layui-tab-title">
            <li class="layui-this">图片</li>
              <!--
            <li>课件</li>
            <li>视频</li>
            -->
          </ul>
          <div class="layui-tab-content" style="height: 250px; margin-bottom: 20px;" id="LAY-flow-demo">
            <div class="layui-tab-item layui-show">
              	<ul class="flow-default" id="test-flow-auto"></ul>
            </div>
              <!--
            <div class="layui-tab-item">
            	<div class="layui-form layui-table-view" id="test-table-ware" style=" height:250px;">
            		<div class="layui-table-box">
            			<div class="layui-table-header">
            				<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
            					<thead>
            						<tr>
										<th width="386">
											<div class="layui-table-cell"><span>文件名</span></div>
										</th>
										<th width="118">
											<div class="layui-table-cell"><span>大小</span></div>
										</th>
									</tr>
								</thead>
							</table>
						</div>
						<div class="layui-table-body layui-table-main" style="height: 230px;">
							<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
								<tbody>

								</tbody>
							</table>
						</div>
					</div>
				</div>

           	</div>
            <div class="layui-tab-item">

         		<div class="layui-form layui-table-view" id="test-table-video" style=" height:250px;">
            		<div class="layui-table-box">
            			<div class="layui-table-header">
            				<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
            					<thead>
            						<tr>
										<th width="386">
											<div class="layui-table-cell"><span>文件名</span></div>
										</th>
										<th width="118">
											<div class="layui-table-cell"><span>大小</span></div>
										</th>
									</tr>
								</thead>
							</table>
						</div>
						<div class="layui-table-body layui-table-main" style="height: 230px;">
							<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
								<tbody>

								</tbody>
							</table>
						</div>
					</div>
				</div>
         	</div>
              -->
          </div>
        </div>
        <div class="layui-btn-container">
		  <button class="layui-btn site-demo-active" data-type="affirm">确定</button>
		  <button class="layui-btn layui-btn-primary" data-type="close">关闭</button>
		</div>
      </div>
  </div>
<script src="../../../layui/layui.js"></script>

<script>
layui.use(['layer','element','flow','upload','table'], function(){
  var $ = layui.$
  ,layer = layui.layer
  ,index = parent.layer.getFrameIndex(window.name) //获取窗口索引
  ,view = layui.view
  ,admin = layui.admin
  ,element = layui.element
  ,flow = layui.flow
  ,upload = layui.upload
  ,table = layui.table
    ,path = '/api/admins/'
    ,auth = 'ppl'


	function getParam(name)
	{
		 var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		 var r = window.location.search.substr(1).match(reg);
		 if(r!=null)return  unescape(r[2]); return null;
	}

	upload.render({
		url: path + 'home/upload'
		,elem: '.avatarUpload'
		//,accept: 'file'
        ,field: 'image'
		//,exts:'jpg|png|gif|bmp|jpeg|ppt|pptx|mp4'
		,before : function(obj){
			$(this.item).find('i').removeClass('layui-hide');
		}
		,done: function(res){

		    if (res.code !== 0){
                layer.msg(res.msg, {icon: 5});
                return false;
            }

			var content = '';
			$(this.item).find('i').addClass('layui-hide');


            content = '<li data-id="'+res.data.id+'" data-path="'+res.data.src+'"><img src="'+res.data.src+'"></li>';

            $('#test-flow-auto').prepend(content);

		}
		,error: function(res){

			layer.msg(res.msg, {icon: 5});
		},headers: {
			Authorization: layui.data(auth).Authorization
		}

	  });

  var active = {

    addurl: function(){

		 $.ajax({
			 url: '/api/management/addurl'
			 ,type:'post'
			 ,dataType:'json'
			 ,data:{url:$('#LAY_mark').val()}
			 ,headers:{Authorization: layui.data(auth).Authorization}
			 ,success:function(res){
				 console.log(res);
			 }

		 });
	}
	,affirm: function(){
		var id = getParam('p')
			,path = $('.layui-show .selected').data('path');


		parent.layui.$('#'+id+'-url').val(path);
		parent.layui.$('#'+id+'-url').change();
		parent.layui.$('#'+id+'-img').attr('src',path).show();
		parent.layer.close(index);
	}
	,delete: function (){
        const elem = $('.layui-show .selected');

        $.ajax({
            url:path + 'home/files/delete'
            ,data:{id:elem.data('id')}
            ,headers:{
                Authorization: layui.data(auth).Authorization,
            }
            ,success:function (res){

                elem.remove();
            }
        });
      }
    //在内部关闭iframe
    ,close: function(set){
      parent.layer.close(index);
    }
  }

	flow.load({
      elem: '#test-flow-auto' //流加载容器
      ,scrollElem: '#test-flow-auto' //滚动条所在元素，一般不用填，此处只是演示需要。
      ,done: function(page, next){ //执行下一页的回调

		  $.ajax({
			  url:path + 'home/files?&page='+page
			  ,headers:{
				  Authorization: layui.data(auth).Authorization
			  }
			  ,success:function(res){

			      if (res.code){
			          parent.window.location.reload();
			          return  false;
                  }

				  var data = res.data
				  	  ,list = [];

				  layui.each(data,function(index,item){
					  list.push('<li data-id="'+item.id+'" data-path="'+item.url+'"><img src="'+item.url+'"></li>');
				  });

				  next(list.join(''),page < res.total_page);
			  }
		  });

      }
    });


	$(document).on('click','.layui-table-body tr',function(){

		$(this).toggleClass('layui-table-click selected').siblings().removeClass('layui-table-click selected');
	});

	$(document).on('click','.layui-tab-item li',function(){

		$(this).toggleClass('selected').siblings().removeClass('selected');
	});

  $('.layui-btn-container .layui-btn').on('click', function(){
    var othis = $(this)
    ,type = othis.data('type');
    active[type] && active[type].call(this);
  });
});
</script>
</body>
</html>
